<template>
	<el-row   v-loading='loading' element-loading-text="拼命加载中">
		<!--  搜索操作区 -->
	    <el-row class="pb10  little-header">
	          <el-col :md='23' :lg='17'  >
	                <div class=' w-100 ' align='left'>
	                	<el-select v-model='search.pro_type' placeholder="请选择" class='w140'>
							    <el-option
							      v-for="item in pro_type"
							      :key="item.value"
							      :label="item.label"
							      :value="item.value">
							    </el-option>
						</el-select>
						<el-select  v-model='search.pro_state' placeholder="请选择" class='w140'>
							    <el-option
							      v-for="item in pro_state"
							      :key="item.value"
							      :label="item.label"
							      :value="item.value">
							    </el-option>
						</el-select>
	                    <el-input  placeholder='请输入产品名称/创建人' v-model='search.name' style='width:22%'></el-input>
	                    <el-button icon="el-icon-search" type='primary' @click='pageInit()'>搜索</el-button>
	                </div>
	          </el-col>
	          <el-col :md='23' :lg='5'  :offset='1' >  
	                <div align="right" class=' mr20 '>
	                        <router-link to='/clearing/trade'><el-button type="primary"  size="small" round title='切换至标的清算' >切换</el-button></router-link>
	                        <el-button  class='export-icon'               size="small" round   @click="handleExport()"><i class='fa fa-share pr5'></i>导出</el-button>
	                </div>
	          </el-col>
	    </el-row>
	    <!-- <el-row class='pb10 text-left' >
	          <router-link to=''><el-button   type="primary"  size="small" round plain>延期</el-button></router-link>
	          <router-link to=''><el-button   type="primary"  size="small" round plain>归档</el-button></router-link>
	    </el-row> -->
	    <!-- table -->
    <el-table border  :data="tableList"  :cell-class-name='hover'  @cell-click='checkUser'>
          <el-table-column prop="name"            label="产品名称"     align="center" ></el-table-column>
          <el-table-column prop="size"            label="规模（元）"   align="center"  ></el-table-column>
          <el-table-column prop="aprt"            label="项目利率"     align="center" ></el-table-column>
          <el-table-column prop="type"            label="产品类型"     align="center" >
                <template  slot-scope='list'>
                      {{list.row.type | pro_type}}
                </template>
          </el-table-column>
          <el-table-column prop=""            label="标的数"     align="center"  >
                
          </el-table-column>
          <el-table-column prop="status"            label="投资人"     align="center">
                <template slot-scope="scope">
                      {{scope.row.status | pro_status}}
                </template>
          </el-table-column>
          <el-table-column prop="aprt"            label="产品状态"     align="center"  ></el-table-column>
          <el-table-column prop="modifyTime"      label="挂牌日期"     align="center"  >
                <template slot-scope="scope">
                      {{scope.row.modifyTime | formatDate}}
                </template>
          </el-table-column>
          <el-table-column prop="cretaeUserName"  label="经办人"       align="center"></el-table-column>
     
          <el-table-column                        label="操作"          align="center"  width="240">
                  <template v-slot="list">
                          <router-link :to='{name:"clearing_makeloans",param:"{code:list.row.code}"}' ><el-button  type="primary" size="mini" round >放款</el-button></router-link>
                          <el-button  type="primary" size="mini" round @click="Product_mana(list.$index, list.row)">付息</el-button>
                          <router-link :to='{name:"product_service",param:"{code:list.row.code}"}' ><el-button  type="primary" size="mini" round >还款</el-button></router-link>
                  </template>
          </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination class='mt28'
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="1"
            :page-sizes="[10, 20]"
            :page-size="10"
            :pager-count="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="Total">
    </el-pagination>
	</el-row>
</template>

<script >
export default {
	name: 'clearing',
	data(){
		return {
			/*static*/
			//搜索区
			pro_type:[
				{label:'产品类型',value:''},
				{label:'收益权类',value:'1'},
				{label:'定向融资工具',value:'2'},
				{label:'理财计划',value:'3'},
				{label:'金融资产',value:'4'},
			],
			pro_state:[
				{label:'产品状态',value:''},
				{label:'存续',value:'1'},
				{label:'延期',value:'2'},
				{label:'到期',value:'3'},
				{label:'清盘',value:'4'},
			],
			/*active*/
			loading:false,
			search:{

			},
			tableList:[{name:'sasde'}],
			Total:null,

		}
	},
	methods:{
		 hover({row, column, rowIndex, columnIndex}){
	    // console.log(row, column, rowIndex, columnIndex)
	    //设置表格第一列的特殊样式  该样式需要在APP 或者 public.css设置   
	      // if(columnIndex == 1 ){  //这里不能用index来判断，因为表头会动态改变
	      //   return 'activeCol'
	      // }
	      if(column.label == '产品名称' || column.label == '电子合同'){
	            return 'activeCol'
	      }
	    },
	    //点击列中的数据改变 
	    checkUser(row, column, cell, event){
	        // console.log(row, column, cell, event)
	        if(column.label == '产品名称'){
	            this.$router.push({name:'clearing_pro',params:{row}})
	        }
	    },
	    /*每页显示条数变化 事件触发
	     *@method 方法名
	     *@for 所属类名
	     *@param{val} 共几条
	     *@return {} 
	    */
	    handleSizeChange(val) {
	      this.search.limit = val;
	      this.pageInit()
	    },
	    /*页数变化 事件触发
	     *@method 方法名
	     *@for 所属类名
	     *@param{val} 第几页
	     *@return {} 
	    */
	    handleCurrentChange(val) {
	      this.search.currentPage = val
	      this.pageInit()
	    },
	}
}
</script>

<style type="text/css" scoped>
	
</style>